<template>
  <div class="detail">
    <div class="Breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item :to="{ path: '/list' }">商品列表</el-breadcrumb-item>
          <el-breadcrumb-item>商品详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="detail_box" >
        <!-- <div class="detail_header">
            <div style="width:450px;margin:0 auto;padding-bottom:2px;">
                 <span class="detail_header_info">12月27日至1月10日，精选产品低至6折，Nike会员更可专享全场商品(特定商品除外)至高90元额外满减优惠及指定NBY产品200元额外满减优惠(特定商品除外)至高90元额外满减优惠及指定NBY产品200元额外满减优惠</span>
            </div>
           
        </div> -->
        
        <div class="detail_main">
            <div class="detail_main_box" >
            <div class="detail_left">

              <div class="detail_imgBox">
                <!-- <div v-for="(item,i) in 2" :key="i">测试Backtop{{ i }}</div> -->
                <p class="image">
                    <img :src="'/static/gd/'+goodsDetails.imgLink" alt="hh">
                    
                  <!-- <img
                    src="https://static.nike.com.cn/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/zkggywreu79x4k80dyu8/sportswear-club-fleece-%E7%94%B7%E5%AD%90%E5%A5%97%E5%A4%B4%E8%BF%9E%E5%B8%BD%E8%A1%AB-6rCNQ4.png"> -->
                </p>
              </div>
            </div>
            <!-- <el-divider direction="vertical" ></el-divider> -->

            <div class="detail_right">
                <div class="detail_r_box">
                    <!-- <h1>价格信息</h1> -->
                    <div class="detail_r_box_title l-8">
                        <!-- {{ goodsId }} -->
                        <h1 class="title_En"> {{goodsDetails.gname}}</h1>
                        <h2 class="title_Cn">{{goodsDetails.detailName}}</h2>
                        <div class="r_price">
                            <div class="price_wrapper">
                                <div class="current_price">{{goodsDetails.gprice}}</div>
                                <div class="current_price_2">¥999 </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="r_btn_wrapper l-8">
                        <div class="r_select">
                            <p style="font-size:18px;font-weight:800;">选择尺码</p>
                            <el-radio-group class="radios" @change="toChange" v-model="radioSize" fill="black" text-color="#ffffff" >
                                <div v-if="goodsDetails.typeId==1"> 
                                    <!-- 鞋类 -->
                                    <el-radio-button label="37" ></el-radio-button>
                                    <el-radio-button label="38"></el-radio-button>
                                    <el-radio-button label="39"></el-radio-button>
                                    <el-radio-button label="40"></el-radio-button>
                                    <el-radio-button label="41" ></el-radio-button>
                                    <el-radio-button label="42"></el-radio-button>
                                    <el-radio-button label="43"></el-radio-button>
                                    <el-radio-button label="44"></el-radio-button>
                                </div>
                                 <div v-if="goodsDetails.typeId==2">
                                    <!-- 服装 -->
                                    <el-radio-button label="S" ></el-radio-button>
                                    <el-radio-button label="M"></el-radio-button>
                                    <el-radio-button label="L"></el-radio-button>
                                    <el-radio-button label="XL"></el-radio-button>
                                </div>
                                 <div v-if="goodsDetails.typeId==3">
                                    <!-- 装备 -->
                                    <el-radio-button label="S" ></el-radio-button>
                                    <el-radio-button label="M"></el-radio-button>
                                    <el-radio-button label="L"></el-radio-button>
                                    <el-radio-button label="XL"></el-radio-button>
                                </div>
                                 <div v-if="goodsDetails.typeId==4">
                                    <!-- 户外 -->
                                    <el-radio-button label="标准款" ></el-radio-button>
                                    <el-radio-button label="升级款"></el-radio-button>
                                    
                                </div>
                                
                            </el-radio-group>
                          
                        </div>

                        <div class="btn_box">
                            <button aria-label="加入购物车" class="addCardBtn" @click="addShopCar">
                                加入购物车</button>
                            <button type="button" class="addCollect" @click="changeCollectStatus"> 
                                <span>{{ CollectStatus ? '添加收藏 💜' : '取消收藏 💚'}}</span> </button>
                                <!-- 🤍 -->
                        </div>
                    </div>

                    <div class="detail_goodinfo l-8">
                        <div class="detail_goodinfo_text">
                            <p>{{goodsDetails.gdescribe}}</p>

                            <ul>
                              <li>显示颜色：  <b>无彩色</b> </li>
                              <li>货号：<b>{{goodsDetails.gcode}}</b> </li>
                            </ul>
                             <button class="detail_goodinfo_more"> <span>查看产品细节</span> </button>
                             <!-- 分割线 <i class="el-icon-mobile-phone"></i> -->
                              <el-divider>Cutting line</el-divider>
                              <!-- collapse -->
                              <div class="detail_goodinfo_collapse">
                                <el-collapse  v-model="d_accordion" @change="accordion_handleChange">

                                  <el-collapse-item name="1">
                                    <template slot="title">
                                      <p class="detail_goodinfo_collapse_p" >尺码和尺寸</p> 
                                    </template>
                                    <ul>
                                        <li><div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div></li>
                                        <li><div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div></li>
                                    </ul>
                                  </el-collapse-item>
                                  <el-collapse-item name="2">
                                     <template slot="title">
                                      <p class="detail_goodinfo_collapse_p">免费配送和退换货</p> 
                                      <!-- <i class="header-icon el-icon-info"></i> -->
                                    </template>
                                    <ul>
                                        <li><div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div></li>
                                        <li><div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div></li>
                                    </ul>
                                  </el-collapse-item>
                               
                                </el-collapse>
                              </div>
                        </div>

                    </div>
                </div>
            </div>
             </div>
        </div>
       
        <div class="detail_info">
            <h1>详细信息</h1>
            <p>轮播图</p>
            <p>详细参数</p>
        </div>
       
    </div>
    <!-- 添加购物弹窗 -->
    <cart ref="cart" @submitToParent="parentSubmit" v-show="cartShow" :goodsDetails="goodsDetails" @closeBox="closeCartBox"></cart>
  </div>
</template>

<script>
import Cart from './cartLike/dropCart.vue'

export default {
  components: {
      Cart
  },
  inject: [
    "MyMessage"
  ],
  name: 'detail',
  data () {
    return {
      loading:true,
      msg: '',
      radioSize:"",
      radioStatus:false,
      d_accordion: ['1','2'],
      CollectStatus:true,
      cartShow:false,
      cartTimer:Object,
      goodsDetails:{
        gid:0,
        typeId:0,
        gname:'',
        detailName:'',
        gprice:0,
        gcode:'',
        gdescribe:'',
        imgLink:'',
        gnum:0,
        gstatus:0,
      },
    }
  },
  computed: {
    // 获取用户信息
    goodsId() {
      return this.$route.params.goodsId;
    },

  },
  methods: {
    
    //获取信息
    getGoodsDetailInfo(){
        const gid = localStorage.goodsId;
        this.$axios.post('/goods/queryOne', {'goodsId':gid})
        .then(res => {
            console.log(res.data.data);
            if(res.data.code == 0){
                this.goodsDetails = res.data.data;
            }else{
                this.goodsDetails.gname = '获取数据NULL'
                console.log("获取数据为空");
            }
            })
    },
    // 父组件dropCart
    // 父组件中被触发的方法，接受到子组件传来的参数
    parentSubmit(data){
        // 父组件的逻辑处理
        this.cartShow = data;
        clearTimeout(this.cartTimer);
        console.log("子组件传来的"+data);
    },

    // 单选框 参数选择
    toChange(val){
        console.log(val);
        console.log(this.radioStatus);
        this.goodsDetails.goodsSize = val;
        if(this.radioSize!=""){
            this.radioStatus = true;
        }
    },
    // 购物车
    addShopCar(){
        if(sessionStorage.getItem('userInfo')){
            
            if(this.radioStatus == true){
                // this.$message.success('添加成功');
                // const _that = this;
                console.log(this.goodsDetail);
                //用户id 商品id 、商品数量
                const ggid = localStorage.goodsId;
                const uuid = JSON.parse(sessionStorage.userInfo);

                this.$axios.post('/cart/addCart', 
                {'goodsId':ggid,'userId':uuid.id,'goodsNum':1})
                .then(res => {
                    // console.log(res.data.data);
                    if(res.data.code == 0){
                        this.cartShow = true;
                        console.log("添加购物车成功");
                        // this.goodsDetails.goodsSize = this.goodsSizel;
                        console.log(this.goodsDetails.goodsSize);
                        this.cartTimer = setTimeout(() => {
                            this.cartShow = false;
                        }, 5000);
                    }else{
                       this.MyMessage("数据异常，添加失败")
                    }
                })
            }else{
                this.MyMessage("请选择商品参数");
                // this.$message.warning('请选择参数');
            }
        }else{
            console.log("未登录");
        }
      
    },
    // 收藏
    changeCollectStatus(){
        if(this.CollectStatus == false){
            this.CollectStatus = true;
             this.MyMessage("确定要取消收藏吗？");
            return;
        }
        if(this.CollectStatus == true){
           
            this.CollectStatus = false;
            return;
        }
    },
    //关闭添加购物车提示框
    closeCartBox(){
        this.cartShow = false;
    },
    // 信息提示框
    accordion_handleChange(val){
        console.log(val);
        if(val == ""){
            console.log("val==''");
        }
    },

  },
  mounted () {
    this.getGoodsDetailInfo();
    window.scrollTo(0,0)
  }
}
</script>

<style scoped>

/*  */
.detail_box{
   width:100%;
   margin: 0 auto;
   margin-top: -10px;
   /* border: 1px solid rgb(236, 63, 15); */
}
.detail_header{
    position: relative;
    margin: 0 auto;
    width:100%;
    /* width: 100px; */
    height: auto;
    background: rgb(247,247,247);
    text-align: center;
}
.detail_header_info{
    
    /* border: 1px solid red; */
    /* width: 100px; */
    vertical-align: middle;
    font-size: 12px;
    color: #111;
    font-weight: 400;
}

/* 主容器 */
.detail_main{
    position: relative;
    display: flex;
    width: 100%;
}
.detail_main_box{
    margin:0 auto;
    display: flex;
}
/* 商品图片信息 */


.detail_left{
    /* width: 100%; */
    position: relative;
    /* left: 40px; */
    /* margin-left: 15%; */
    /* width:1900px; */
    height: auto;
    /* border: 2px solid rgb(156, 198, 29); */
}
.detail_left .detail_imgBox{
    position: relative;
    width:600px;
    top: 18px;
    /* border: 2px solid red; */
    padding: 1px;
}
.detail_left .detail_imgBox .image{
   text-align: center;
   height: 500px;
   /* border: 1px solid red; */
}
.detail_left .detail_imgBox .image img{
    height: 100%;
    /* width: 0 auto; */
    position: relative;
     border: 1px solid rgb(230, 230, 230);
}
/* right 价格信息 */
.l-8{
    position: relative;
    /* left: 80px; */
}

.detail_right{
    position: relative;
    /* width:auto; */
    width: auto;
    left: 30px;
    padding: 1px;
    /* float: right; */
    /* right: 0; */
    /* border-left: 2px solid rgb(228, 47, 1); */
    /* border: 1px solid rgb(216, 139, 24); */
}

.detail_r_box{
    position: relative;
    width: 480px;
    padding:10px;
    /* border: 2px solid rgb(149, 124, 85); */
}
.detail_r_box .detail_r_box_title{
    /* padding: 1px; */
    /* width: 0 auto; */
    word-break:break-all;
     width:450px;
    /* width: 380px; */
    /* left: 0px; */
    position: relative;
    /* border: 1px solid red; */
    
    
}
.detail_r_box_title .title_En{

    font-weight: 700;
    line-height: .9;
    letter-spacing: -0.05em;
    font-size: 35px;
}
.detail_r_box_title .title_Cn{
     font-size: 20px;
     font-weight: 500;
      margin-bottom: 25px;
}
.detail_r_box_title .r_price{
    margin-bottom: 5px;
    margin-top: 20px;
    margin-left: 1px;
    
}
.price_wrapper{
    margin-top: 10px;
    font: inherit;
    display: flex;
    font-size: 25px;
}
.price_wrapper .current_price{
    display: inline-block;
    margin-right: 12px;
    
}
.price_wrapper .current_price_2{
    font-size: 22px;
    line-height: 1.2;
    color: rgb(117, 117, 117);
    text-decoration: line-through;
}

/* r_ btn */
.r_btn_wrapper{
    position: relative;
    margin-bottom: 30px;
    width: 450px;
     /* width: 500px; */
    /* border: 1px solid rebeccapurple; */
}
/* 参数选择 */
.r_btn_wrapper .r_select{
    top:10px;
    position: relative;
    /* border: 1px solid rebeccapurple; */
    margin-bottom: 20px;
}
.r_select .radios{
     margin-bottom:20px;
    /* margin-top: -5px; */
    /* border-radius: 30px; */
}
.r_select .radios >>> .el-radio-button__inner{
    border-color:1px rbg(245,245,245);
    border-right: 0;
    border-left: 0;
}
.r_select .radios :hover{
    color:rgb(255, 253, 253);
    background: black;
    border-radius: 5px;
    /* font-weight: 600; */
}


/* 加入购物车 收藏 */
.r_btn_wrapper .btn_box{
    width: 100%;
    position: relative;
    margin-top: 25px;
}
.r_btn_wrapper .btn_box .addCardBtn{
    width: 100%;
    min-height: 60px;
    padding: 18px 24px;
    border-radius: 50px;
    border: 1.5px solid transparent;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #111;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    margin-bottom: 10px;
}
.r_btn_wrapper .btn_box .addCardBtn:hover{
    background: rgb(91, 88, 88);
    color: #fff;
}

.r_btn_wrapper .btn_box .addCollect{
    width: 100%;
    min-height: 60px;
    padding: 18px 24px;
    border-radius: 50px;
    border: 1.5px solid transparent;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: 0 0;
    color: #111;
    border-color: #ccc;
     cursor: pointer;
     font-size: 20px;
}
.r_btn_wrapper .btn_box .addCollect span{
    padding-right: 12px;
    padding-left: 12px;
}
.r_btn_wrapper .btn_box .addCollect .heartIcon{
    margin-left: -25px;
}
/* .r_btn_wrapper .btn_box .addCollect .heartIcon::before{
    content: "🤍";
} */
.r_btn_wrapper .btn_box .addCollect:hover{
    border-color: rgb(17,17,17);
    /* border: 1px solid rgb(17,17,17); */
    /* background: #ccc; */
}

/* right 详情 */
.detail_goodinfo{
    
    width: 450px;
    /* height: 500px; */
    /* right: 0; */
    /* border: 1px solid red; */
    padding-left: 0;
    padding-right: 0;
}
.detail_goodinfo_text{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.detail_goodinfo_text p{
    line-height: 1.75;
}
.detail_goodinfo_text ul{
    /* border: 1px solid red; */
    
    padding-top: 10px;
    /* padding-bottom: 24px; */
}
.detail_goodinfo_text ul li{
    position: relative;
    right: 20px;
    margin-bottom: 3px;
    /* font-weight: 600; */
    /* margin-left: 16px; */
}

.detail_goodinfo_more{
    position: relative;
    left: -5px;
   border: none;
    background: #fff;
}
.detail_goodinfo_more span{
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid #111;
    cursor: pointer;
    letter-spacing: 0.03em;
   
}
.detail_goodinfo_more:hover{
    color: rgb(142, 136, 136);
    /* border-bottom:1px solid rgb(142, 136, 136); */
}

.detail_goodinfo_collapse{
    padding-left: 0px;
    padding-right: 0px;
    
}
.detail_goodinfo_collapse_p{
font-size:15px;
font-weight:700;
margin-top: 20px;
}




/* 注意事项 */
.detail_info{
    position: relative;
    margin: 0 auto;
    width:100%;
    height: 200px;
    text-align: center;
    /* border: 0.1px solid rgb(138, 23, 183); */
}
</style>
